import Taro, { Component } from '@tarojs/taro'
import { View, Text, ScrollView } from '@tarojs/components'
import styles from './index.module.scss'
import classNames from 'classnames'
import head from 'lodash/head'
import GoodsTwo from "@/components/custom-layout/goods-two";
import {FyImg, LoadMore, Version} from "@/components/index";
import {getCount, getPage} from "@/api/productApi";
import {getRandomPage, getRandomPageNumber, goodsScore, getBrand } from "@/utils/storage";
import {getUnit} from "@/utils/utils";
import {OSS} from "@/config/config";
import {toGoodsPage} from "@/utils/page_router";
import {USER_INFO} from "@/config/storage";
import {PRODUCT_SALES_TEXT} from "@/config/file";

/**
 * 商品推荐
 * @param list 商品推荐
 */
interface IProps {
  score: any
}
export default class Index extends Component<IProps, {}>  {
  props: any
  state: any

  constructor() {
    super(...arguments)
    this.state = {
      productList: []
    }
  }

  componentDidMount() {
    const { score } = this.props
    // console.log(score)
    // console.log(goodsScore(score))
    if (goodsScore(score)) {
      this.getList({gtNeedScore: 1})
    } else {
      this.getList({ needScore: 0})
    }
  }

  getList (data?) {
    getPage({page: 1, limit: 8, isHot: 1, ...data}).then(({ data }) => {
      this.setState({
        productList: data.list
      })
    })
  }

  render() {
    const { productList } = this.state
    return (<View className={styles.goodsCommend}>
      <View className={styles.head}>精品推荐</View>
      <ScrollView scrollX className={styles.list}>
        {
          productList.map((item, index) => {
            return <View className={styles.listItem} onClick={() => toGoodsPage(item)}>
              <FyImg className={styles.top} src={`${OSS}/system/image/goods-top${index + 1}.png`} />
              <FyImg src={head(item.images)} className={styles.coverImg}/>
              <View className='t-o-e m-t-10'>{item.name}</View>
              <View className={styles.price}>
                {goodsScore(item.needScore)  && <Text className={styles.needScore}>{item.needScore}{getBrand()}+</Text>}
                <Text className='f-s-26'>{Number(item.salePrice)}元</Text>
                {!goodsScore(item.needScore) && <s className={styles.originPrice}>￥{Number(item.originPrice)}</s>}
              </View>
              {!!item.salesNumber && <Text className={styles.salesNumber}>
                {PRODUCT_SALES_TEXT} {getUnit(item.salesNumber, '+')}
              </Text>}
            </View>
          })
        }
      </ScrollView>
    </View>)
  }
}
